<!DOCTYPE html>
<html>
	<head>
		<title>VueX2</title>
		<!-- 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
		<script crossorigin="anonymous"
			integrity="sha512-i48GtNrU5tVNKFkvIT3nArzgcIYGLxb0t6Ok+yu6yybHksvifmC+mmT2c3II7PZgUsA5sFnxROrkeM5Yt46g3A=="
			src="https://lib.baomitu.com/vuex/3.6.2/vuex.js"></script> -->
		<script src="./js/vue-2.6.11.js"></script>
		<script src="./js/vuex-3.6.2.js"></script>
	</head>

	<body>
		<div id="app">
			根组件 <div>{{ $store.state.count }}</div>
			<!-- 根组件 <div>{{ $store.getters.add(2) }}</div> -->
			<!-- 根组件 <div>{{ add(3) }}</div> -->
			子组件 <counter></counter>
		</div>

		<script>
			const ADD = "ADD"

			Vue.config.devtools = true

			const store = new Vuex.Store({
				state: {
					count: 0,
					count2: 0
				},

				mutations: {
					add(state, payload) {
						console.log("payload", payload)
						// state.count++
						state.count += payload.n
					},
					addAsync(state, payload) {
						setTimeout(() => {
							state.count += payload.n
						}, 1000)
					},
					[ADD](state, payload) {
						state.count++
						state.count2++
					}
				},

				// getters: {
				// 	add: (state) => (n) => {
				// 		return state.count + n
				// 	}
				// }，

				actions: {
					addAsync({
						state,
						commit
					}, value) {
						setTimeout(() => {
							commit("add", value)
							// commit({
							// 	type: "add",
							// 	n: value
							// })
							console.log("actionsState", state)
						}, 1000)
					},
					[ADD]({
						state,
						commit
					}, value) {
						state.count++
						state.count2++
					}
				}
			})

			// store.commit("ADD")
			// store.commit("addAsync")

			// store.commit({
			// 	type: "add",
			// 	n: 10
			// })

			// store.commit("addAsync", {
			// 	n: 10
			// })

			// store.dispatch("addAsync", {
			// 	n: 30
			// })

			Vue.component("counter", {
				// template: `
				//   <div> {{ count }} </div>
				// `,
				template: `
				  <button @click="add">{{ count2 }}</button>
				`,

				// computed: Vuex.mapState(["count","count2"]),
				computed: Vuex.mapState({
					count: state => state.count,
					count2: state => state.count2 * 3,
				}),

				methods: {
					...Vuex.mapMutations(["ADD"]),
					// ...Vuex.mapActions(["addAsync"]),

					add() {
						// store.commit("ADD")
						this.ADD()
						// this.addAsync({
						// 	n: 30
						// })
					}
				}
			})

			const app = new Vue({
				el: "#app",
				store,

				computed: Vuex.mapGetters(["add"]),

				created() {
					console.log("created")
					if (sessionStorage.getItem("state")) {
						console.log("state_created")
						this.$store.state.count = JSON.parse(sessionStorage.getItem("state")).count;
						this.$store.replaceState(
							Object.assign(
							  {},
								this.$store.state,
								JSON.parse(sessionStorage.getItem("state"))
							)
						)
						// sessionStorage.removeItem("state");
						sessionStorage.clear();
					}

					// Web
					window.addEventListener("pagehide", (e) => {
						console.log("pagehide")
						e.returnValue = "确定刷新吗？";
						sessionStorage.setItem("state", JSON.stringify(this.$store.state));
					})
					
					// iOS 不支持 beforeunload
					window.addEventListener("beforeunload", (e) => {
						 console.log("beforeunload")
					})
				}
			})

			console.log({
				"state": store.state.count
			})
		</script>

	</body>
</html>